<?xml version="1.0" encoding="UTF-8"?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/templates/general.xhtml">

    <ui:define name="title"><h:outputText value="History" /></ui:define>
    <ui:define name="header"><h:outputText value="History" /></ui:define>

    <ui:define name="content">

        <h:form id="form" >
            <p:breadCrumb>
                <p:menuitem value="Home" update="@form" url="/pages/editor.xhtml"/>
                <p:menuitem value="Add Source" update="@form" url="/pages/editor.xhtml" />
                <p:menuitem value="History" update="@form" url="/pages/journal.xhtml" />
                <p:menuitem value="Logout" update="@form" action="#{userSession.logout()}" style="float: right;"/>
            </p:breadCrumb>
            <p:fieldset styleClass="fieldset" legend="History" style="min-height: 400px; width: 95%">
                <p:dataTable id="recordsTable" var="record" value="#{journalBean.recordList}" rowKey="#{record.id}"
                             paginator="true" rows="10"
                             selection="#{journalBean.selectedRecord}" selectionMode="single"
                             filteredValue="#{journalBean.filteredRecords}"
                             emptyMessage="No records found with given criteria"
                             styleClass="library-table"
                             style="margin-top: 30px;">

                    <f:facet name="header" >
                        <h3>Click "Show" button after selecting a row to see class details</h3>
                    </f:facet>

                    <p:column headerText="Class Name" filterBy="#{record.activity.className}" filterMatchMode="contains" >
                        <h:outputText value="#{record.activity.className}" />
                    </p:column>

                    <p:column headerText="Class Members" filterBy="#{record.tree.name}" filterMatchMode="contains" >
                        <h:outputText value="#{record.name}" />
                    </p:column>

                    <p:column headerText="Date Added" width="100" >
                        <h:outputText value="#{record.activity.activityDate}" />
                    </p:column>

                    <p:column headerText="Flowchart Preview" width="160" >
                        <p:commandLink action="#{journalBean.setSelectedImageId(record.image.id)}" update="dialog" oncomplete="PF('dlg').show()" >
                            <p:graphicImage value="#{imageService.image}" height="90" width="90" >
                                <f:param name="id" value="#{record.image.id}" />
                            </p:graphicImage>
                        </p:commandLink>

                        <p:dialog id="dialog" header="#{record.image.name}" widgetVar="dlg" modal="true" resizable="false" >
                            <p:scrollPanel id="scroll" style="overflow: scroll; max-height: 500px; max-width: 1000px;">
                                <p:graphicImage value="#{imageService.image}" >
                                    <f:param name="id" value="#{journalBean.selectedImageId}" />
                                </p:graphicImage>
                            </p:scrollPanel>
                        </p:dialog>
                    </p:column>

                    <f:facet name="footer">
                        <p:commandButton id="showButton" action="#{viewerBean.redirect(journalBean.selectedRecord.activity)}" ajax="false" value="Show" icon="ui-icon-search"/>
                    </f:facet>

                </p:dataTable>
            </p:fieldset>
        </h:form>
    </ui:define>
</ui:composition>
